<!-- 入住人信息 -->
<template>
	<vxe-grid ref="grid" v-bind="gridOptions" class="grid">
		<template #top>
			<vxe-toolbar class="padding-none">
				<template #buttons>
					<a-typography-text strong>
						<blockquote>入住记录</blockquote>
					</a-typography-text>
				</template>
				<template #tools>
					<span>入住人数：{{ checkInNum }} 人</span>
				</template>
			</vxe-toolbar>
		</template>
		<template #status="{row}">
			<div class="status-box">
				<!-- 1 入住 2 搬离 -->
				<div :class="[row.status === 1 ? 'is-check-in' : 'check-in']"></div>
				<div>{{ row.status === 1 ? '已入住' : '搬离' }}</div>
			</div>
		</template>

		<template #occupancy="{row}">
			<div>
				{{ row.checkInBeginTime }}
				<span v-if="row.checkInBeginTime">至</span>
				{{ row.checkInEndTime }}
			</div>
		</template>
		<!-- <template #property="{row}">
			<a @click="deliveryNoteFun(row, 1)">查看</a>
		</template>
		<template #checkOut="{row}">
			<a v-if="row.status === 3" @click="deliveryNoteFun(row, 2)">查看</a>
		</template> -->
		<template #operate="{row}">
			<a v-color="{color: 'danger'}" v-if="row.status === 1" @click="moveOut(row)">搬离</a>
		</template>
	</vxe-grid>

	<!-- 物业交割单 -->
	<delivery-note v-model:visible="record.delivery" :id="record.id"></delivery-note>
	<!-- 搬离 -->
	<move-out-dialog v-model:visible="isShowMoveOut" :info="moveInfo" @success="refuseData"></move-out-dialog>
	<!-- 退房交割单 -->
	<check-out-note v-model:visible="record.checkOut" :contractId="record.id"></check-out-note>
</template>

<script setup lang="ts">
	import {reactive, ref} from 'vue'
	import {VxeGridProps} from 'vxe-table'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import {getCheckInRecord, getCountEnterContractCheck} from '@/api/charter-contract'
	import moveOutDialog from '@/components/contract/contract-detail-dialog/charter-contract/move-out.vue'
	import DeliveryNote from '@/components/contract/contract-detail-dialog/charter-contract/delivery-note.vue'
	import CheckOutNote from '@/components/contract/contract-detail-dialog/charter-contract/check-out-note.vue'

	const emit = defineEmits(['success', 'close'])
	const props = defineProps<{
		data: any
		approvalStatus?: string
	}>()

	const paymentType: {
		[key: string | number]: any
	} = {
		1: '银联',
		2: '支付宝',
		3: '微信'
	}

	const checkInNum = ref(0)
	const params = reactive<any>({
		current: 1,
		enterPriseContractId: null,
		isSearchCount: 1,
		size: 15
	})
	const record = reactive({
		id: '',
		delivery: false,
		checkOut: false
	})
	const moveInfo = ref<any>({})
	const isShowMoveOut = ref(false)
	const moveOut = (row: any) => {
		moveInfo.value = {
			houseId: row.houseId,
			fullAddress: row.fullAddress,
			compactId: row.contractId, // 子合同id
			enterPriseContractId: row.enterPriseContractId, // 包租合同id
			enterEmployeeId: row.enterPriseEmployeeId, // 企业员工id
			checkInBeginTime: row.checkInBeginTime,
			checkInEndTime: row.checkInEndTime
		}
		isShowMoveOut.value = true
	}

	// 获取入住人数
	const countCheckInNum = () => {
		getCountEnterContractCheck({
			enterPriseContractId: props.data?.id
		}).then(res => {
			checkInNum.value = res.data || '-'
		})
	}
	const grid = ref()
	const gridOptions = reactive<VxeGridProps>({
		height: 'auto',
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '状态',
				minWidth: 150,
				// align: 'center',
				fixed: 'left',
				slots: {
					default: 'status'
				}
			},
			{
				align: 'center',
				title: '楼栋信息/房间号',
				field: 'fullAddress',
				minWidth: 200
			},
			{
				title: '入住人姓名',
				minWidth: 200,
				align: 'center',
				field: 'name'
			},
			{
				title: '入住人电话',
				align: 'center',
				minWidth: 150,
				field: 'phone'
			},
			{
				title: '入住周期',
				align: 'center',
				minWidth: 250,
				slots: {
					default: 'occupancy'
				}
			},
			{
				title: '入住时间',
				align: 'center',
				minWidth: 200,
				field: 'createTime'
			},
			// {
			// 	title: '物业交割单',
			// 	minWidth: 150,
			// 	align: 'center',
			// 	slots: {
			// 		default: 'property'
			// 	}
			// },
			{
				title: '搬离时间',
				align: 'center',
				minWidth: 200,
				field: 'moveTime'
			},
			{
				title: '操作',
				align: 'center',
				minWidth: 100,
				fixed: 'right',
				slots: {
					default: 'operate'
				}
			}
			// {
			// 	title: '退房交割单',
			// 	align: 'center',
			// 	minWidth: 150,
			// 	fixed: 'right',
			// 	slots: {
			// 		default: 'checkOut'
			// 	}
			// }
		],
		pagerConfig,
		proxyConfig: {
			props: proxyConfigProps,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					params.enterPriseContractId = props.data?.id
					countCheckInNum()
					return getCheckInRecord({...params, current, size})
				}
			}
		}
	})

	const refuseData = () => {
		grid.value?.commitProxy('query')
	}

	const deliveryNoteFun = (data: any, number) => {
		record.id = data.id
		if (number === 1) {
			record.delivery = true
		} else {
			record.checkOut = true
		}
	}
	const close = () => emit('close')
</script>

<style scoped lang="less">
	.status-box {
		display: flex;
		align-items: center;

		.is-check-in {
			width: 6px;
			height: 6px;
			line-height: 27px;
			border-radius: 50%;
			background: #52c41a;
			margin-right: 8px;
			opacity: 1;
		}

		.check-in {
			width: 6px;
			height: 6px;
			line-height: 27px;
			border-radius: 50%;
			background: #0266ff;
			margin-right: 8px;
			opacity: 1;
		}
	}
</style>
